
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TRP系统投放代码说明</title>
<script src="/static/common/semidata/seajs/seajs/2.2.1/sea.js" id="seajsnode"></script>
    <script src="/static/common/semidata/config.js"></script>
<link href="/static/trp/css/adserving_api.css" rel="stylesheet">
</head>
<body>
<div class="mulu">
	<div class="innerContent">
		<ul>
			<li><a href="#bm_1">概述</a></li>
			<li>
				<a href="#bm_2">JavaScript投放</a>
				<ul>
					<li><a href="#bm_2.1">说明</a></li>
					<li><a href="#bm_2.2">代码示例</a></li>
					<li><a href="#bm_2.3">多广告位优化</a></li>
				</ul>
			</li>
                        <li><a href="#bm_3">Iframe投放</a></li>
		</ul>
	</div>
	<div class="triangle" title="展开目录"></div>
</div>

<div>
	<span class="title">TRP系统投放代码说明</span><br><br>
	<span class="updateTime">更新时间：2014-08-20</span>
</div>

<h1 id="bm_1">1 概述</h1>

<p>媒体通过嵌入TRP系统广告投放代码向TRP系统投放服务器发送投放请求，投放服务器根据投放请求中的参数以及投放系统中事先录入的投放规则进行筛选，实时返回被投放的广告信息。</p>

<p>投放代码接收返回的广告信息，从中解析出物料地址、跳转地址、曝光监测代码、点击监测代码等，将广告加入页面指定位置进行广告展示、监测。</p>

<p>用户需登录TRP系统，获取所属广告位的投放代码。TRP系统投放支持以下种类的投放：</p>

<ul>
<li>JavaScript投放</li>
<li>Iframe投放</li>
</ul>

<h1 id="bm_2">2 JavaScript投放</h1>

<h2 id="bm_2.1">2.1 说明</h2>

<p>JavaScript投放即使用JavaScript动态在页面制指定标记位置投放广告。</p>

<h2 id="bm_2.2">2.2 代码示例</h2>

<p>从TRP系统获取JS投放基础代码（下称Part A）。Part A相当于一个工具包，用于加载投放所必要的JS代码。将Part A嵌入广告所在页面（建议放置在<code>&lt;head&gt;</code>内），若一个页面有多个广告位，无需重复嵌入多条Part A。Part A为异步加载，不会影响页面正常加载速度。</p>

<p>Part A样例如下：</p>

<pre><code class="highlighter">&lt;!-- 获取投放请求处理JS，建议放置在head内 --&gt;
&lt;script type="text/javascript"&gt;
(function (doc) {
    var js = doc.createElement("script"),
	fs = doc.getElementsByTagName("script")[0];
    js.charset = "utf-8";
    js.src = "<span class="serving">http://d189.mzhen.cn/static/adserving/semi_ad_serving.js</span>";
    fs.parentNode.insertBefore(js, fs);
})(document);
&lt;/script&gt;
</code></pre>

<p>当一个广告位录入TRP投放系统后，将会生成对应的一条JS代码（下称Part B）。Part B的功能是执行某一广告位的投放操作，包括请求投放服务器、展示广告等。将Part B嵌入页面对应广告位位置即可。</p>

<p>Part B样例如下：</p>

<pre><code class="highlighter">&lt;div id="GOME_1"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
(function(win) {
    var params = {};
    params["l"] = "1";      	//TRP ad placement id
    params["_id"] = "GOME_1";	// Ad placement DIV id 非必须参数. 仅当媒体需要自定义广告位DIV id时需要设置,params["_id"]与DOM中对应的DIV id的值必须保持完全一致。默认值为params["_srv"]+'_'+params["l"]
    params["_srv"] = "GOME";
    params["w"] = "100";      	//宽度
    params["h"] = "100";      	//高度
    
    params["k1"] = "";      	//一级关键字
    params["k2"] = "";      	//二级关键字
    params["k3"] = "";      	//三级关键字
    
    params["max"] = "1";      	//分栏数
    params["showtype"] = "0";   //展示类型：0-默认、1-轮播图、2-Banner、3-自定义模板
    params["time"] = "3000";    //轮播图切换时间
    params["arraytype"] = "0";  //Banner布局方式：0-水平布局、1-垂直布局
    params["code"] = "";      	//自定义展示模板代码
    
    params["src"] = "";      	//默认素材地址
    params["ldp"] = "";      	//默认跳转地址
    params["timeout"] = "1000"; //默认超时时间
    
    __semi_rpq = win.__semi_rpq || [];
	__semi_rpq.push(params);
})(window);
&lt;/script&gt;
</code></pre>

<p>下面的例子展示了一个HTML页面源码，包含两条广告位投放代码。</p>

<pre><code class="highlighter">&lt;head&gt;
&lt;!-- 获取投放请求处理JS，建议放置在head内 --&gt;
&lt;script type="text/javascript"&gt;
(function (doc) {
    var js = doc.createElement("script"),
        fs = doc.getElementsByTagName("script")[0];
    js.charset = "utf-8";
    js.src = "<span class="serving">http://d189.mzhen.cn/static/adserving/semi_ad_serving.js</span>";
    fs.parentNode.insertBefore(js, fs);
})(document);
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
......
&lt;!-- TRP投放系统ID=1的广告位所在页面位置 --&gt;
&lt;div id="GOME_1"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
(function (win) {
    var params = {};
    params["l"] = "1";      //TRP ad placement id
    params["_id"] = "GOME_1"; // Ad placement DIV id
    params["_srv"] = "GOME"; 
    params["w"] = "100";
    params["h"] = "100";
    
    params["k1"] = "衣服"; 
    params["k2"] = "上衣";
    params["k3"] = "衬衫";
    
    params["max"] = "1";
    params["showtype"] = "0";
    params["time"] = "0"; 
    params["arraytype"] = "";
    params["code"] = ""; 
    
    params["src"] = "";
    params["ldp"] = "";
    params["timeout"] = "1000";
    
    __semi_rpq = win.__semi_rpq || [];
	__semi_rpq.push(params);
})(window);
&lt;/script&gt;
......
&lt;!-- TRP投放系统ID=2的广告位所在页面位置 --&gt;
&lt;div id="GOME_2"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
(function (win) {
    var params = {};
    params["l"] = "2";      //TRP ad placement id
    params["_id"] = "GOME_2"; // Ad placement DIV id
    params["_srv"] = "GOME";
    params["w"] = "200";
    params["h"] = "100";
    
    params["k1"] = "衣服"; 
    params["k2"] = "裤子";
    params["k3"] = "牛仔裤";
    
    params["max"] = "3";
    params["showtype"] = "1";
    params["time"] = "3000"; 
    params["arraytype"] = "";
    params["code"] = ""; 
    
    params["src"] = "";
    params["ldp"] = "";
    params["timeout"] = "1000";
    
    __semi_rpq = win.__semi_rpq || [];
	__semi_rpq.push(params);
})(window);
&lt;/script&gt;
......
&lt;/body&gt;
</code></pre>

<h2 id="bm_2.3">2.3 多广告位优化</h2>

<p>当一个页面包含多条广告位时，您可以对Part B进行合并优化。此时多条广告位的投放请求合并成一条，可以大大提高广告投放请求的速度。</p>

<p>样例如下：</p>

<pre><code class="highlighter">&lt;head&gt;
&lt;!-- 获取投放请求处理JS，建议放置在head内 --&gt;
&lt;script type="text/javascript"&gt;
(function (doc) {
    var js = doc.createElement("script"),
        fs = doc.getElementsByTagName("script")[0];
    js.charset = "utf-8";
    js.src = "<span class="serving">http://d189.mzhen.cn/static/adserving/semi_ad_serving.js</span>";
    fs.parentNode.insertBefore(js, fs);
})(document);
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
......
&lt;!-- TRP投放系统ID=1的广告位所在页面位置 --&gt;
&lt;div id="GOME_1"&gt;&lt;/div&gt;
......
&lt;!-- TRP投放系统ID=2的广告位所在页面位置 --&gt;
&lt;div id="GOME_2"&gt;&lt;/div&gt;
......
&lt;script type="text/javascript"&gt;
(function (win) {
    var params = {};
    params["l"] = ["1", "2"];       //TRP ad placement id ARRAY
    params["_id"] = ["GOME_1", "GOME_2"]; // Ad placement DIV id ARRAY
    params["_srv"] = "GOME";
    params["w"] = ["100", "100"];
    params["h"] = ["100", "200"];
    
    params["k1"] = ["衣服", "衣服"]; 
    params["k2"] = ["上衣", "裤子"];
    params["k3"] = ["衬衫", "牛仔裤"];
    
    params["max"] = ["1", "3"];
    params["showtype"] = ["0", "1"];
    params["time"] = ["0", "3000"]; 
    params["arraytype"] = ["", ""];
    params["code"] = ["", ""]; 
    
    params["src"] = ["", ""];
    params["ldp"] = ["", ""];
    params["timeout"] = ["1000", "1000"];
    
    __semi_rpq = win.__semi_rpq || [];
	__semi_rpq.push(params);
})(window);
&lt;/script&gt;
&lt;/body&gt;
</code></pre>
			        
<h1 id="bm_3">3 Iframe投放</h1>

<p>TRP系统支持iframe方式包裹JavaScript投放代码，即一个广告位对应一个iframe标签，每个广告位单独发送曝光请求。使用iframe包装将会增多用户请求次数，并且在无法实现上述多广告位优化。</p>

<p>在广告位所在的页面中添加iframe引用semiad_iframe.html，并将广告位id以参数形式传入iframe：</p>

<pre><code>&lt;!-- TRP系统中ID=3的广告位所在页面位置 --&gt;
&lt;iframe width="{广告位宽度}" height="{广告位高度}" frameborder="0" marginheight="0" marginwidth="0" scrolling="no" allowTransparency="true" src="<span class="prefix">http://d189.mzhen.cn/static/adserving/semiad_iframe.html</span>?l=3&amp;_srv=GOME&amp;w=111&amp;h=222&amp;max=1&amp;showtype=0&amp;time=3000&amp;arraytype=0&amp;code="&gt;&lt;/iframe&gt;
</code></pre>

<img src="/static/trp/images/totop.png" id="toTop"/>

<script type="text/javascript">
seajs.use('jquery', function($){
	if(!/msie /i.test(navigator.userAgent)){
		(function(){
			var scrollEle = clientEle = document.documentElement,
				toTopBtn = document.getElementById("toTop"),
				compatMode = document.compatMode,
				isChrome = window.navigator.userAgent.indexOf("Chrome") === -1 ? false : true;
			//不同渲染模式以及Chrome的预处理
			if(compatMode === "BackCompat" || isChrome){
				scrollEle = document.body;
			}
			if(compatMode === "BackCompat"){
				clientEle = document.body;
			}
			//返回顶部按钮的点击响应（注册函数），时间间隔和高度缩减率可以调节
			toTopBtn.onclick = function(){
				var moveInterval = setInterval(moveScroll, 10);
				function moveScroll(){
					setScrollTop(getScrollTop() / 1.2);
					if(getScrollTop() === 0){
						clearInterval(moveInterval);
					}
				}
			}
			//滚动时判断是否显示返回顶部按钮（注册函数）
			window.onscroll = function(){
				var display = toTopBtn.style.display;
				if(getScrollTop() > getClientHeight()){
					if(display === "none" || display === ""){
						toTopBtn.style.display = "block";
					}
				}else{
					if(display === "block" || display === ""){
						toTopBtn.style.display = "none";
					}
				}
			}
			//获取和设置scrollTop
			function getScrollTop(){
				return scrollEle.scrollTop;
			}
			function setScrollTop(value){
				scrollEle.scrollTop = value;
			}
			//获取当前网页的展示高度（第一屏高度），此处Chrome正常
			function getClientHeight(){
				return clientEle.clientHeight;
			}
		})();
	}else{
		document.getElementById("toTop").style.display = "none";
	}
	$(function(){
		$(".mulu").css("height", "auto").css("height", "100%");
		$(".triangle").click(function() {
			if($(this).attr("title") === "展开目录"){
				$(".mulu").css({"width":"326px"});
				$(this).css({
					"left":"310px",
					"-webkit-transform": "rotate(0deg)",
					"-moz-transform": "rotate(0deg)",
					"-ms-transform": "rotate(0deg)",
					"-o-transform": "rotate(0deg)",
					"transform": "rotate(0deg)"
				}).attr({"title": "收回目录"});
				$(".innerContent").css({"left":"0px"});
			} else {
				$(".mulu").css({"width":"26px"});
				$(this).css({
					"left":"10px",
					"-webkit-transform": "rotate(180deg)",
					"-moz-transform": "rotate(180deg)",
					"-ms-transform": "rotate(180deg)",
					"-o-transform": "rotate(180deg)",
					"transform": "rotate(180deg)"
				}).attr({"title": "展开目录"});
				$(".innerContent").css({"left":"-300px"});
			}
		});
		$ajax.ajax({
			url: '/trp/position/get_position_code',
	     	data: {
	     		position_id: 1
	     	},
			type : 'GET',
			dataType : 'json',
			success: function(data){
				if(!semi.utils.isEmpty(data) && !semi.utils.isEmpty(data.prefix) && !semi.utils.isEmpty(data.serving)){
					$('.prefix').html(data.prefix);
					$('.serving').html(data.serving);
				}
			},
			timeout: function(){}
	   	});
	});
	if(!/msie /i.test(navigator.userAgent)){
		(function(){
			var getElementsByClass = function(searchClass,node,tag) {
				var classElements = new Array();
				if ( node == null )
				        node = document;
				if ( tag == null )
				        tag = '*';
				var els = node.getElementsByTagName(tag);
				var elsLen = els.length;
				var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
				for (i = 0, j = 0; i < elsLen; i++) {
				        if ( pattern.test(els[i].className) ) {
				                classElements[j] = els[i];
				                j++;
				        }
				}
				return classElements;
			};
			var highlighters = getElementsByClass("highlighter", document, "code");
			for(var i=0; i<highlighters.length; i++){
				var content = highlighters[i].innerHTML;
				var jsVarReg = /([^0-9a-zA-Z_$])(var|function|if)([^0-9a-zA-Z_$])/g;
				var strReg = /"(\w|\W)*?"/g;
				var commentReg = /(&lt;!--(\w+|\W)*?--&gt;)|(\/\/.*)/g;
				var tagReg = /(&lt;\/?\w+)([^&]*)(&gt;)/g;
				content = content.replace(tagReg, "<span class='hl-tag'>$1</span>$2<span class='hl-tag'>$3</span>");
				content = content.replace(strReg, function(all){
					return "<span class='hl-str'>" + all + "</span>";
				});
				content = content.replace(commentReg, function(all){
					return "<span class='hl-comment'>" + all + "</span>";
				});
				content = content.replace(jsVarReg, "$1<span class='hl-variable'>$2</span>$3");
				highlighters[i].innerHTML = content;
			}
		})();
	}
});
</script>
</body>
</html>
